<template>
  <Tag></Tag>
  <ElCard id="main">
    <div
      class="chat"
      ref="chartContainer"
      style="width: 600px; height: 400px"
    ></div>
    <div class="chat1" ref="chat1" style="width: 500px; height: 400px">

    </div>
    <div class="chat2" ref="chat2" style="width: 600px; height: 400px">

</div>
<div class="chat3" ref="chat3" style="width: 500px; height: 400px">

</div>
  </ElCard>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
// import "echarts/extension/bmap/bmap";
import { ref, onMounted } from "vue";
import Tag from "../pages/Tag.vue";
const chartContainer = ref();
const chat1 = ref();
const chat2 = ref();
const chat3 = ref();
const initChart = () => {
  const myChart = echarts.init(chartContainer.value);
  myChart.setOption({
  xAxis: {
    type: 'category',
    data: ['手机', '电脑', '耳机', '智能商品',  '平板', '其它']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [180, 160, 150, 80,  110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
});
};
const initChart1 = () => {
  const myChart = echarts.init(chat1.value);
  myChart.setOption( {xAxis: {
    data: ['5月', '6月', '7月', '8月', '9月']
  },
  yAxis: {},
  series: [
    {
      data: [100, 220, 280, 430, 490],
      type: 'line',
      stack: 'x'
    },
    {
      data: [50, 40, 30, 50, 100],
      type: 'line',
      stack: 'x'
    }
  ]});
};
const initChart2 = () => {
  const myChart = echarts.init(chat2.value);
  myChart.setOption( {
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 335,
          name: '电脑利润'
        },
        {
          value: 234,
          name: '其他利润'
        },
        {
          value: 100,
          name: '耳机利润'
        },
        {
          value: 134,
          name: '智能商品利润'
        },
        {
          value: 200,
          name: '平板利润'
        },
        {
          value: 1048,
          name: '手机利润'
        }
      ]
    }
  ]
});
};

const initChart3 = () => {
  const myChart = echarts.init(chat3.value);
  myChart.setOption( {
  xAxis: {
    data: ['5月', '6月', '7月', '8月', '9月']
  },
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [220, 182, 290, 330, 310]
    }
  ]
});
};

onMounted(() => {
  initChart(); // 组件挂载成功之后初始化图表
  initChart1();
  initChart2();
  initChart3();
});
</script>
<style lang="css" scoped>
  #main{
    width: 100%;
  }
  .el-card__body{
    display: flex;
    flex-wrap: wrap;
  }
</style>
